<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo04-vue的循环&json数据联合示例</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>
        vue中 循环的语法： v-for="item in 数据源" <br/>
        item:表示是循环的每一个元素信息 。 item是我们取一个变量名，你可以取任何名字<br/>
        数据源：表示要进行循环的集合 <br/>

        用法： v-for 只能用在 html的标签中，即你要对哪个标签进行循环，就在这个标签里面，使用v-for的语法
    </p>
    <ul>
        <li v-for="item in stus"><!-- 注意：当v-for对某一个标签进行了循环之后，我们就可以在这个标签内部随意使用循环变量item的值 -->
            <span>{{item.name}}</span>&nbsp;&nbsp;{{item.sex}}&nbsp;&nbsp;{{item.age}}&nbsp;&nbsp;{{item.address}}
        </li>
    </ul>

    <p>
        vue还可以进行 对象信息的循环：<br/>
        循环对象的语法： v-for= " (value,key) in 对象的数据源" v-for里面定义的 value和key这两个变量名名称可以任意修改
    </p>
    <div>
        <span v-for="(value,key) in student">
            <span>{{key}}：</span>{{value}}
        </span>
    </div>

</div>
</body>
<script>
    /*
        json数据特点：
            1. 它的符号，有且只可能有  [表示的是一个集合] 或者 {表示的是一个对象}
            2. json保存的对象数据，全部都必须以  key:value的键值对格式展示

     */
    new Vue({
        el: "#app",
        data: {
            student: {
                "name": "刘三毛", "sex": "男", "age": 15, "address": "湖北省武汉市汤逊湖长城科技园6号源码时代"
            },
            stus: [
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
                {"name": "李四2", "sex": "男", "age": 22, "address": "湖北荆门"},
            ]


        },
        methods: {}
    })
</script>
</html>